<template>
  <div w-full h-full f-c-c @click="handleClick">
    <icon-mdi-refresh
      :style="{ fontSize: `${size}px`, animationDuration: `${duration}ms` }"
      :class="{ 'animate-spin': loading }"
    />
  </div>
</template>

<script lang="ts" setup>
interface Props {
  size?: number;
  duration?: number;
}
const props = withDefaults(defineProps<Props>(), { size: 22, duration: 500 });

const loading = ref(false);

const handleClick = async () => {
  loading.value = true;

  setTimeout(() => {
    loading.value = false;
  }, props.duration);
};
</script>
